<template>
    <div class="header_">
        <div class="header clear">
            <h1 class="logo">
                <router-link to="/index"><img src="../assets/logo_w.png" alt="版权云"></router-link>
            </h1>
            <ul class="nav clear">
                <router-link to="/index" tag="li">首页</router-link>
                <router-link to="/server" tag="li">版权服务</router-link>
                <router-link to="/development" tag="li">开放技术</router-link>
                <router-link to="/cooperation" tag="li">商业合作</router-link>
                <router-link to="school" tag="li">版权学堂</router-link>
                <router-link to="/file" tag="li">文档中心</router-link>
            </ul>
            <div class="block_login">
                <div class="login_reg clear" v-if="!this.croUser">
                    <router-link tag="span" class="span_log" to="login">登录</router-link>
                    <router-link tag="span" class="span_reg" to="register">注册</router-link>
                </div>
                <router-link tag="div" class="username" v-else to="/user">{{ croUser && croUser.username }}</router-link>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
    data() {
        return {
            username: null,
        };
    },
    mounted() {
        // console.log(this.croUser);
        // if(this.croUser){
        //     this.username = this.croUser.username || '';
        // }else{
        //     this.OUT_LOGIN();
        //     this.$router.push('/login');
        // }
    },
    computed: {
        ...mapState({
            croUser: function(state){
                return state.croUser;
            }
        })
    },
    methods: {
        ...mapMutations(["OUT_LOGIN"]),
    },
};
</script>
<style scoped lang="scss">
.header_ {
    width: 100%;
    min-width: 1200px;
    background-color: #2a303c;
    .header {
        width: 1200px;
        height: 90px;
        margin: 0 auto;
        .logo {
            float: left;
            width: 170px;
            height: 57px;
            margin-top: 33px;
            margin-right: 160px;
        }
        .nav {
            float: left;
            padding-top: 55px;
            .active {
                background: #be1414;
            }
            li {
                float: left;
                cursor: pointer;
                color: #fff;
                font-size: 15px;
                margin: 0 15px;
                padding: 6px 15px;
                border-radius: 3px;
            }
            li:hover {
                background: #be1414;
            }
        }
        .block_login {
            float: right;
            padding-top: 55px;
            .username {
                color: #fff;
                cursor: pointer;
                font-size: 15px;
                padding: 6px 15px;
                border-radius: 3px;
            }
            .username:hover {
                background: #be1414;
            }
            .username.active {
                background: #be1414;
            }
            .login_reg {
                .span_log,.span_reg {
                    float: left;
                    color:#fff;
                    font-size: 12px;
                    line-height: 14px;
                    cursor: pointer;
                    padding: 9px 15px;
                    background: #be1414;
                    border-radius: 3px;
                }
                .span_log {
                    margin-right: -1px;
                    border-right:1px solid rgba(255,255,255,.5);
                    border-top-right-radius: 0;
                    border-bottom-right-radius: 0;
                }
                .span_reg {
                    border-left:1px solid rgba(255,255,255,.5);
                    border-top-left-radius: 0;
                    border-bottom-left-radius: 0;
                }
                .span_log:hover,.span_reg:hover {
                    background: rgb(203, 67, 67);
                }
            }
        }
    }
}
</style>
